<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Stodeon</title>
		 <link rel="stylesheet" type="text/css" href="css/index.css">
		 <link rel="stylesheet" type="text/css" href="css/base.css">
		 <link rel="stylesheet" type="text/css" href="css/features.css"/>
	</head>
	<body>
		<!--header区-->
		<header>
		    <div class="w clearfix">
		        <div class="logo fl"><img src="images/logo.png"></div>
		        <ul class="nav fl clearfix">
		            <li class="fl"><a href="index.html">Home</a></li>
		            <li class="fl"><a href="#">About</a></li>
		            <li class="fl"><a href="#">Portfolio</a></li>
		            <li class="fl features"><a href="#">Features</a>
		                <ul class="subnav">
		                    <li><a href="#">Typography</a></li>
		                    <li><a href="#">Shortcodes</a></li>
		                    <li><a href="#">Columns</a></li>
		                    <li><a href="#">Pricing Plans</a></li>
		                    <li><a href="#">Alerts</a></li>
		                    <li><a href="#">Services</a></li>
		                </ul>
		            </li>
		            <li class="fl"><a href="blog.html">Blog</a></li>
		            <li class="fl"><a href="contact.html">Contact</a></li>
		        </ul>
		        <div class="icons">
		            <div class="icon fl"></div>
		            <div class="icon fl"></div>
		            <div class="icon fl"></div>
		            <div class="icon fl"></div>
		            <div class="icon fl"></div>
		            <div class="icon fl"></div>
		        </div>
		    </div>
		</header>
		<!-- main区 -->
		<main class="w">
			<div style="padding-top: 145px; padding-bottom: 60px;">
				<h2  style="text-align: center; color: black; font-size: 20px;">SAY THANKS FOR AWESOME FEATURES</h2>
			</div>
			<div class="main_1">
			    <div class="main_1_inner clearfix">
			        <div class="fl">
			            <h2>EVENTS PLANNING</h2>
			            <p1>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.</p1>
			            <div class="red">
			                <div class="icon_img">
			                </div>
			            </div>
			        </div>
			        <div class="fl">
			            <h3>MASTERING DESIGN</h3>
			            <p2>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.</p2>
			            <div class="red">
			                <div class="icon_img2">
			                </div>
			            </div>
			        </div>
			        <div class="fl">
			            <h4>EXPERT DEVELOPERS</h4>
			            <p3>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.</p3>
			            <div class="red">
			                <div class="icon_img3">
			                </div>
			            </div>
			        </div>
			        <div class="fl">
			            <h5>ATTENSION TO DETAILS</h5>
			            <p4>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.</p4>
			            <div class="red">
			                <div class="icon_img4"></div>
			            </div>
			        </div>
			        <div class="fl">
			            <h6>ANOTHER COOL SERVICE.</h6>
			            <p5>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.</p5>
			            <div class="red">
			                <div class="icon_img5"></div>
			            </div>
			        </div>
			        <div class="fl">
			            <h7>EVENTS PLANNING</h7>
			            <p6>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.</p6>
			            <div class="red">
			                <div class="icon_img6"></div>
			            </div>
			        </div>
			    </div>
			</div>
				<div style=" padding-bottom: 45px;">
				<h2  style="text-align: center; color: black; font-size: 20px;">SO MANY FEATURES</h2>
			</div>
			<div class=" w main_6" style="height: 460px;">
			   <div class="main_6_1 fl" style="margin-left: 50px;">
				   <div id="main_6_11"></div>
				   <div>
					   <p style="text-align: center; line-height: 35px; color: black; font-weight: bold;">BEAUTIFUL DESIGN</p>
					   <p style="text-align: center; line-height: 20px;">Nullam vitae sollicitudineros. Cras varius vehicula velit, ac congue quam dictum sed</p>
				   </div>
			   </div>
			    <div class="main_6_1 fl" style="margin-left: 70px; margin-right: 70px;">
			   	   <img src="images/flat-phone.jpg" >
			   </div>
			   
			   <div class="main_6_1 fl">
				   <div id="main_6_13"></div>
				   <div>
				   	   <p style="text-align: center; line-height: 35px; color: black; font-weight: bold;">AUTO RELOADING</p>
				   	   <p style="text-align: center; line-height: 20px;">Nullam vitae sollicitudineros. Cras varius vehicula velit, ac congue quam dictum sed</p>
				   </div>
			   </div>
			    <div class="main_6_1 fl" style="margin-left: 50px; margin-top: 40px;">
			   	   <div id="main_6_14"></div>
				   <div>
				   	   <p style="text-align: center; line-height: 35px; color: black; font-weight: bold;">RESPONSIVE LAYOUT</p>
				   	   <p style="text-align: center; line-height: 20px;">Nullam vitae sollicitudineros. Cras varius vehicula velit, ac congue quam dictum sed</p>
				   </div>
			   </div>
			    <div class="main_6_1 fl" style="margin-left: 70px; margin-right: 70px; margin-top: 40px;">
			   	   <div id="main_6_15"></div>
				   <div>
				   	   <p style="text-align: center; line-height: 35px; color: black; font-weight: bold;">EASY TO CUSTOMIZE</p>
				   	   <p style="text-align: center; line-height: 20px;">Nullam vitae sollicitudineros. Cras varius vehicula velit, ac congue quam dictum sed</p>
				   </div>
			   </div>
			    <div class="main_6_1 fl" style=" margin-top: 40px;">
			   	   <div id="main_6_16"></div>
				   <div>
				   	   <p style="text-align: center; line-height: 35px; color: black; font-weight: bold;">HELP & SUPPORT</p>
				   	   <p style="text-align: center; line-height: 20px;">Nullam vitae sollicitudineros. Cras varius vehicula velit, ac congue quam dictum sed</p>
				   </div>
			   </div>
			  
			</div>
		</main>
		<!--footer区-->
		<footer style="padding-top: 90px;">
			    <div class="footer_top clearfix w">
			        <div class="footer_top_1 fl">
			            <h7>ABOUT STUDEON</h7>
			            <div class="footer_line"></div>
			            <p8>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id arcu neque, at convallis est felis.</p8>
			            <p9>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque id arcu neque, at convallis est felis.</p9>
			        </div>
			        <div class="footer_top_2 fl">
			            <h8>THE TAGS</h8>
			            <div class="footer_line"></div>
			            <div class="footer_top_2_label">
			                <li class="fl"><a href="#">Awesome</a></li>
			                <li class="fl"><a href="#">Strategy</a></li>
			                <li class="fl"><a href="#">Photography</a></li>
			                <li class="fl"><a href="#">Development</a></li>
			                <li class="fl"><a href="#">Css</a></li>
			                <li class="fl"><a href="#">photoshop</a></li>
			                <li class="fl"><a href="#">Html</a></li>
			                <li class="fl"><a href="#">Awesome</a></li>
			                <li class="fl"><a href="#">Strategy</a></li>
			                <li class="fl"><a href="#">Photoshop</a></li>
			                <li class="fl"><a href="#">Html</a></li>
			            </div>
			        </div>
			        <div class="footer_top_3 fl">
			            <h9>LATEST TWEETS</h9>
			            <div class="footer_line"></div>
			            <div class="tw">
			                <div class="tw_1">
			                    <div class="tw_logo"></div>
			                    <p11>I like this awesome freebie. Check it out <a href="#">@http://t.co/9vslJFpW</a></p11>
			                    <h10>ABOUT 15 MINS</h10>
			                </div>
			                <div class="tw_2">
			                    <div class="tw_logo"></div>
			                    <p12>I like this awesome freebie. Check it out <a href="#">@http://t.co/9vslJFpW</a></p12>
			                    <h11>ABOUT 15 MINS</h11>
			                </div>
			            </div>
			        </div>
			        <div class="footer_top_4 fr">
			            <h10>FLICKR FEED</h10>
			            <div class="footer_line"></div>
			            <div class="footer_top_4_p">
			                <div class="fl"></div>
			                <div class="fl"></div>
			                <div class="fl"></div>
			                <div class="fl"></div>
			                <div class="fl"></div>
			                <div class="fl"></div>
			            </div>
			        </div>
			    </div>
			    <div class="footer_bootem">
			        <div class="footer_bootem_w w">
			            <div class="footer_bootem_p1"></div>
			            <p7 class="fr">Copyright © 2015 All rights Reserved | Template by  <span>W3layouts</span></p7>
			        </div>
			        <div class="footer_bootem_p2 fr"></div>
			    </div>
			</footer>
	</body>
</html>
